Nice Menus CSS Examples

Here are some examples of some common CSS changes for your menus. You can either edit these in your custom Nice Menus CSS file or you can simply add these to the bottom of your theme's style.css file.

To create a custom Nice Menus CSS, you can make a copy of the provided nice_menus_default.css file and tell Nice Menus to use your new CSS by going to Administer -> Themes -> Configure -> Global settings -> "Path to custom nice menus CSS file" and entering your new file's path. Example: sites/all/themes/your-theme-name/css/your-file-name.css

Make hovered links white with a black background:

  ul.nice-menu li a:hover { 
    color: #fff; 
    background: #000;
  }

Make the link to the current page that you're on black with yellow text:

  ul.nice-menu li a.active { 
    color: #ff0; 
    background: #000;
  }

Get rid of all borders:

  ul.nice-menu,
  ul.nice-menu ul,
  ul.nice-menu li {
    border: 0;
  }

Get rid of the borders and background colour for all top-level menu items:

  ul.nice-menu,
  ul.nice-menu ul,
  ul.nice-menu li {
    border: 0;
    background: none;
  }

  ul.nice-menu-right li.menuparent,
  ul.nice-menu-right li li.menuparent{ 
    background: url('arrow-right.png') right center no-repeat; 
  }

  li.menuparent li, li.menuparent ul {
    background: #eee;
  }

Have a nice menu stick to the top of the page e.g. for an admin menu (where the Nice Menu block number is 1):

  #block-nice_menus-1 {
    position: absolute;
    top: 0;
    left: 0;
  }

In Firefox, as above but where the menu doesn't move as you scroll down the page (where the Nice Menu block number is 1):

  #block-nice_menus-1 {
    position: fixed;
    top: 0;
    left: 0;
  }

That should get you started. Really this is just about knowing your CSS and styling it the way you want it.